<template>
	<view class="content">
		<view class="backs">
			<view class="userinfo">
				<image class="userinfo-avatar" :src="userInfo.icon" mode=""></image>
				<view class="username" :style="userInfo.state!=-1?'color:#de1c1c':''">
					<view class="">
						<text class="" style="font-weight: 600;">{{userInfo.username}}</text>
					</view>
					<view class="">
						<text>{{userInfo.userType==3?'尊贵VIP':'普通会员' }}</text>
					</view>
				</view>
			</view>
			<view class="updinfo" :style="userInfo.state!=-1?'color:#de1c1c':''" @click="toUser">
				<text>个人资料 ></text>
			</view>
		</view>
		<view class="toptitle">
			<view class="topdes">
				宠物服务便捷，为你提供便利
			</view>
		</view>

		<view class="" style="">
			<uni-grid :column="4" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="">
			<uni-card :is-full="true">
				<view class="addr">
					<view class="tip">
						<view class="now">
							我的当前收货地址
						</view>
						<view class="other" @click="toAddr">
							选择其他地址
						</view>
					</view>
					<view class="info">
						<view class="mobile">
							收货人：{{addr.name||''}} {{addr.phone||''}}
						</view>
						<view class="detail">
							收货地址：{{(addr.detail)||''}}
						</view>
					</view>
				</view>
				<view class="noti">
					<view class="">
						<image src="../../static/tip.png" style="height: 20px;width: 20px;"></image>
					</view>
					<view class="">
						如您购买的商品有任何问题，请直接与购买商家联系，商家会为您处理，让您售后无忧
					</view>
				</view>
			</uni-card>
		</view>

		<!-- <view class="" style="margin-top: 10px;">
			<uni-grid :column="5" :show-border="false" :square="false" @change="changetool">
				<uni-grid-item v-for="(item ,index) in listtool" :index="index" :key="index">
					<view class="grid-item-box" style="margin-top: -10px;">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view> -->
		<view>
			<button @click="goPay" class="togo" type="">退出登录</button>
		</view>
		<!-- 意见反馈 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="意见反馈" value="" placeholder="请输入意见或者反馈内容"
				@close="dialogInputClose" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						url: '../../static/state/no.png',
						text: '商品订单',
						badge: '',
						type: "primary"
					},
					{
						url: '../../static/state/no.png',
						text: '待支付',
						badge: '',
						type: "warning"
					}, {
						url: '../../static/state/no.png',
						text: '待收货',
						badge: '',
						type: "warning"
					},
					{
						url: '../../static/state/no.png',
						text: '预约订单',
						badge: '',
						type: "success"
					}

				],
				listtool: [{
						url: '../../static/state/no.png',
						text: '客服',
						// badge: '',
						type: "primary"
					}, {
						url: '../../static/state/no.png',
						text: '帮助中心',
						badge: '',
						type: "warning"
					},
					{
						url: '../../static/state/no.png',
						text: '意见反馈',
						badge: '',
						type: "success"
					},
					{
						url: '../../static/state/no.png',
						text: '菜谱',
						badge: '',
						type: "success"
					},
					{
						url: '../../static/state/no.png',
						text: '商户中心',
						badge: '',
						type: "success"
					}
				],
				userInfo: {
					state: -1
				},
				addr: {},
				lever: '普通会员',
				isFirst: 0
			}
		},
		onLoad() {
			// this.getCarCount()
		},
		onShow() {
			this.getMember()
		},
		methods: {
			//获取用户信息
			getMember() {
				let user = uni.getStorageSync("member")
				let addr = uni.getStorageSync("addr")
			
				if (user) {
					this.userInfo = user;
				} else {
					this.apis.getMember().then(res => {
						this.userInfo = res;
						if(res == null){
							uni.navigateTo({
								url: "/pagesOne/login/login"
							})
						}
					})
				}
				if (addr) {
					this.addr = addr;
				} else {
					this.apis.addrDefault().then(res => {
						this.addr = res;
					})
				}

			},
			//完善个人信息
			toUser() {
				uni.navigateTo({
					url: "/pagesOne/user/user"
				})
			},
			//选择地址
			toAddr() {
				uni.navigateTo({
					url: "/pagesOne/addr/addr?action=select"
				})
			},
			//去购物
			goPay() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定退出',
					success: function (res) {
						if (res.confirm) {
							that.apis.logout().then(res => {
								// uni.removeStorageSync("uid", res.member.id)
								// uni.removeStorageSync("token", res.accessToken)
								// uni.removeStorageSync("user", res.member)
								uni.switchTab({
									url: "/pages/index/index"
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				
			},
			// //订单栏
			// change(e) {
			// 	uni.navigateTo({
			// 		// url: "/pagesOne/shopOrder/shopOrder?index=" + e.detail.index
			// 		url: "/pagesOne/order/order?index=" + e.detail.index
			// 	})

			// },
			//订单栏
			change(e) {
				console.log("数据"+e.detail.index)
				if(e.detail.index == 0){
					uni.navigateTo({
						url: "/pagesOne/shop-order/shop-order?index=" + e.detail.index
					})
				}else if (e.detail.index == 1){
					console.log("hhh")
					uni.navigateTo({
						url: "/pagesOne/shop-order/shop-order?index=" + (e.detail.index-1)
					})
					// uni.navigateTo({
					// 	url: "/pagesOne/need-pay/need-pay"
					// })
				}else if (e.detail.index == 2){
					uni.navigateTo({
						url: "/pagesOne/shop-order/shop-order?index=" + (e.detail.index-1)
					})
				}else if (e.detail.index == 3){
					uni.navigateTo({
						url: "/pagesOne/subscribe-order/subscribe-order"
					})
				}
				// uni.navigateTo({
				// 	// url: "/pagesOne/shopOrder/shopOrder?index=" + e.detail.index
				// 	url: "/pagesOne/order/order?index=" + e.detail.index
				// })
			
			},
			//客服栏
			changetool(e) {
				if (e.detail.index == 0) {
					wx.openCustomerServiceChat({
						//企业微信的企业id
						corpId: 'ww64dc65db4b71b7b0',
						extInfo: {
							//客服链接
							url: 'https://work.weixin.qq.com/kfid/kfc50f855f661cab65e'
						},
						success: (e) => {
							console.log('e', e)
						},
						fail: (err) => {
							uni.showToast({
								title: '暂不支持客服',
								icon: 'none'
							})
						}
					})
				}
				if (e.detail.index == 1) {
					uni.navigateTo({
						url: "/pagesOne/help/help"
					})
				}
				if (e.detail.index == 3) {
					uni.navigateTo({
						url: "/pagesOne/helpMenu/helpMenu"
					})
				}
				if (e.detail.index == 2) {
					this.$refs.inputDialog.open()
				}
				if (e.detail.index == 4) {
					uni.showToast({
						title: '暂未开发',
						icon: 'none'
					})
				}
			},
			//意见反馈输入完成
			dialogInputConfirm(val) {
				// 关闭窗口后，恢复默认内容
				if (!val) {
					uni.showToast({
						title: "请输入内容"
					})
					return;
				}
				this.apis.opinionPut({
					opinion: val
				}).then(res => {
					console.log(res)
					this.$refs.inputClose.val = ''
					this.$refs.inputDialog.close()
				})

			},
			dialogInputClose(val) {
				this.$refs.inputClose.val = ''
			},
			toincome() {
				uni.navigateTo({
					url: "/subpkg/sales/sales"
				})
			},
			//获取购物车数量
			getCarCount() {
				if (uni.getStorageSync("token")) {
					this.apis.getCarCount().then(res => {
						console.log(res)
						uni.setTabBarBadge({
							index: 2,
							text: res + ''

						})
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	.backs {
		background-color: #4095E5;
		display: flex;
	}

	image {
		width: 100%;
	}

	.uni-section__content-title {
		font-size: 22px !important;
	}

	.image {
		width: 40px;
		height: 40px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.updinfo {
		color: #ffffff;
		align-items: center;
		justify-content: center;
		display: flex;
		margin: 30px;
		font-weight: bolder;
	}

	.userinfo {
		color: #000000;
		display: flex;
		flex-direction: row;
		flex: 1;
	}

	.userinfo-avatar {
		overflow: hidden;
		display: block;
		width: 120rpx;
		height: 120rpx;
		margin: 20rpx;
		margin-top: 25rpx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.username {
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		color: #fff;
		margin-left: 5px;
	}

	.toptitle {
		background-color: #4095E5;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 53px;
		border-radius: 0 0 50% 50%;
	}

	.topdes {
		background-color: #101010;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 53px;
		color: #efefef;
		font-size: 18px;
		width: 90%;
		position: relative;
		top: 10px;
		border-radius: 10px 10px 50% 50%;
	}

	.content {
		width: 100%;
		overflow-x: hidden;
	}

	//===购物车
	.addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}


	.tip {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		background-color: #E6D48C;
		border: 1px solid #E6D48C;
		position: relative;
	}

	.tip:before {
		border: 10px solid transparent;
		border-top-color: #E6D48C;
		position: absolute;
		content: "";
		left: 50%;
		top: 100%;
		margin-left: -10px;
	}

	.tip:after {
		border: 10px solid transparent;
		border-top-color: #E6D48C;
		position: absolute;
		content: "";
		left: 50%;
		top: 100%;
		margin-left: -10px;
		margin-top: -1px;
	}

	.now {
		margin-left: 10px;
		font-weight: bolder;
		color: #917810;
	}

	.other {
		margin-right: 10px;
	}

	.info {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: flex-start;
	}

	.mobile {
		margin: 10px 0px 0px 10px;
	}

	.detail {
		margin: 10px 0px 0px 10px;
	}

	.noti {
		margin: 10px;
		padding: 15px;
		background: rgba(250, 79, 81, 0.22);
		display: flex;
	}

	//end====购物车
	.togo {
		background-color: #4095E5;
		color: white;
		width: 80%;
		margin-top: 25px;
		border-radius: 15px;
	}
</style>
